<template>
  <li class="right">
    <el-tabs type="card" value="盘口">
      <el-tab-pane :label="$t('pk[0]')" name="盘口">
        <!-- <ul class="rheader">
                    <li class="list"></li>
                    <li class="list"></li>
                    <li class="list"></li>
                </ul> -->
        <ul class="rightheader">
          <li class="price">{{ $t("pk[1]") }}</li>
          <li class="volume">{{ $t("pk[2]") }}</li>
          <li class="name">{{ $t("pk[3]") }}</li>
        </ul>
        <div class="buyordermain" ref="buyordermain">
          <ul
            class="buyorder"
            v-for="(item, index) in realtime.asks"
            :key="index"
          >
            <li class="price fall">
              {{ $public.toLowFixed(item.price, Prodata.code) }}
            </li>
            <li class="volume">{{ item.totalSize }}</li>
            <li class="name">{{ item.cumulative }}</li>
          </ul>
        </div>
        <section class="jiange">
          <!-- <h2 class="price rise" >{{Prodata.price}}  ↓</h2> -->
          <h2 v-if="Prodata.change < 0" class="price rise">
            {{ $public.toLowFixed(Prodata.price, Prodata.code) }} ↓
          </h2>
          <h2 v-else-if="Prodata.change > 0" class="price fall">
            {{ $public.toLowFixed(Prodata.price, Prodata.code) }}
          </h2>
          <h3 class="changeRate">
            ≈{{ $public.toLowFixed(Prodata.cnyPrice, Prodata.code, 2) }}CNY
          </h3>
        </section>
        <div class="sellordermain">
          <ul
            class="sellorder"
            v-for="(item, index) in realtime.bids"
            :key="index"
          >
            <li class="price rise">
              {{ $public.toLowFixed(item.price, Prodata.code) }}
            </li>
            <li class="volume">{{ item.totalSize }}</li>
            <li class="name">{{ item.cumulative }}</li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('pk[4]')" name="实时成交">
        <div class="realtime">
          <ul class="rightheader">
            <li class="price">{{ $t("pk[1]") }}</li>
            <li class="volume">{{ $t("pk[2]") }}</li>
            <li class="name">{{ $t("pk[5]") }}</li>
          </ul>
          <div class="realtimemain">
            <ul
              class="realorder"
              v-for="(item, index) in RealTimeDealdata_throttle"
              :key="index"
            >
              <li class="price">
                {{ $public.toLowFixed(item.price, Prodata.code) }}
              </li>
              <li class="volume">{{ item.amount }}</li>
              <li class="name">
                <span class="fall" v-if="item.dc == 'buy'">{{
                  $t("order[4]")
                }}</span>
                <span class="rise" v-if="item.dc == 'sell'">{{
                  $t("order[5]")
                }}</span>
              </li>
            </ul>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </li>
</template>

<script>
import { realtimetrade, gethandicap } from "@/api/exchange";
// import PagesSize from "_dom/paging"
// import PersonalHeader from "_dom/personalheader"
import { contractwsdepth, contractwstrader } from "@/libs/util";
import _ from "lodash";
export default {
  name: "contratrealtime",
  props: ["Prodata", "codetype"],
  data() {
    return {
      realtime: "",
      RealTimeDealdata: "",
      RealTimeDealdata_throttle: [],
    };
  },
  watch: {
    codetype: function (newVal, oldVal) {
      if (oldVal) {
        let wsdatadepth = {
          unsub: "depth@" + oldVal,
        };
        let wsdatatrader = {
          unsub: "depth@" + oldVal,
        };
        contractwsdepth(wsdatadepth, "unsub");
        contractwstrader(wsdatatrader, "unsub");
        this.getdata(newVal);
        this.RealTimeDealget(newVal);
      }
    },
    ["RealTimeDealdata"]: _.throttle(
      function (newVal) {
        this.RealTimeDealdata_throttle = newVal;
      },
      800,
      { leading: true }
    ),
  },
  methods: {
    getdata(data) {
      //盘口数据
      let _data = {
        code: data,
      };
      this.realtime = [];
      gethandicap(_data)
        .then((res) => {
            this.realtime = res;
            let wsdata = {
              sub: "depth@" + data,
            };
            this.buyordermainScrollBottom()
            contractwsdepth(wsdata, this);
        })
        .catch((err) => {});
    },
    contractwsdepthlist(data) {
      this.realtime = data;
    },
    RealTimeDealget(data) {
      //实时成交
      let _data = {
        code: data,
      };
      this.RealTimeDealdata = [];
      realtimetrade(_data)
        .then((res) => {
            this.RealTimeDealdata = res.data;
            let wsdata = {
              sub: "trader@" + _data.code,
            };
            
            contractwstrader(wsdata, this);
        })
        .catch((err) => {});
    },
    contractwstraderlist(data) {
      this.RealTimeDealdata = data.data;
    },
    buyordermainScrollBottom(){
      this.$nextTick(()=>{
         this.$refs.buyordermain.scrollTop=this.$refs.buyordermain.scrollHeight
      })
    }
  },
  created() {
    this.getdata(this.codetype);
    this.RealTimeDealget(this.codetype);
  },
  components: {},
};
</script>

